<template>
<div class="progress">
  <h1 style="color: #ffffff ; letter-spacing: 0.1em">就诊进度</h1>
  <div class="progress_contain" v-if="doctor!==null">
    <div class="step">
      <el-steps :space="500" :active="activeIndex" finish-status="success" simple>
        <el-step title="挂号候诊"></el-step>
        <el-step title="就诊"></el-step>
        <el-step title="缴费"></el-step>
        <el-step title="完成诊断"></el-step>
      </el-steps>
    </div>
    <div class="title"><span>挂号信息</span><span>日期:{{appointment.appointmentDate}}</span></div>
    <div class="info_table">
      <div><el-descriptions direction="vertical" :column="6" border style="width: 1000px">
        <el-descriptions-item label="姓名" align="center">{{me.name}}</el-descriptions-item>
        <el-descriptions-item label="性别" align="center"><el-tag type="plain">{{me.sex}}</el-tag></el-descriptions-item>
        <el-descriptions-item label="年龄"  align="center">{{me.age}}</el-descriptions-item>
        <el-descriptions-item label="血型" align="center">
          <el-tag size="small">{{me.bloodtype}}型</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系电话" align="center" :span="2"
        >{{me.tel}}</el-descriptions-item
        >
        <el-descriptions-item label="症状" align="center" span="3">{{appointment.symptom}}</el-descriptions-item>
        <el-descriptions-item label="过敏历史" align="center" span="3">
          <span v-for="item in me.allergicHistory">{{item}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="挂号医生" align="center" span="6">
          {{ doctor.subject }}  {{doctor.name}}{{doctor.profectionTitle}} --- {{doctor.roomNo}}号诊室
        </el-descriptions-item>
      </el-descriptions></div>
      <div> <el-card class="total">
        <template #header>
          <div class="card-header">
            <span>您当前的排队号数</span>
          </div>
        </template>
        <div>
          <span style="font-size: 120px">{{status.queueNumber}}</span>
        </div>
      </el-card></div>
    </div>

  </div>
  <div class="tips" v-else>
    <el-empty description="暂无数据"></el-empty>
  </div>
</div>
</template>

<script>
import {checkProgress} from "../../api/api";

export default {
  name: "Index",
  //请求个人信息和当前医生挂号人数
  mounted() {
    checkProgress({},{
      "satoken": localStorage.getItem("satoken")
    })
    .then(res=>{
      console.log(res)
      if(res.ret===0){
        this.doctor = res.doctor
        this.me = res.user
        this.status = res.data
        this.appointment = res.appointment
        if (this.status.queueNumber === null){
          this.status.queueNumber = 0
        }
        this.appointment.appointmentDate = this.$moment(this.appointment.appointmentDate).format('YYYY年-MM月-DD日 HH:mm:ss，dddd')
        if (this.status.finishTime!==null){
          this.activeIndex = 4
        }else if(this.status.cureTime !== null){
          this.activeIndex = 3
        }else if(this.status.billTime!==null){
          this.activeIndex = 2
        }
        else{
          this.activeIndex = 1
        }
      }
      else{
        this.doctor = null
        this.me = null
        this.status = null
        this.appointment = null
      }
    })
    .catch(err=>{
      console.log(err)
    })
  },
  watch:{

  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
  data(){
    return{

      activeIndex: 1,
      status:{

      },
      me:{
      },
      doctor:{
      },
      appointment:{

      },
    }
  },
  methods:{

  },
}
</script>

<style scoped>
::v-deep(.el-empty) p{
  font-size: 30px;
  letter-spacing: 0.25em;
  color: #FF6633;
}
.title{
  text-align: center;
  color: #f4f4f5;
  cursor: default;
  height: auto;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0;
}

.title span{
  font-size: 25px;
  margin-right: 100px;
}

.total{
  height: 270px;
  width: 250px;
  margin-left: 100px;
  cursor: default;
}

.total:hover{
  animation: shakeY 1s;
}

.info_table{
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
}
.step{
  margin: 0 auto;
  width: 100%;
}
.progress_contain::before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('../../assets/background.jpg') 0 / cover fixed;
  filter: blur(10px);
  z-index: -1;
}
.progress_contain{
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

  position: relative;
  z-index: 1;
  width: 100%;
  height: 500px;
  background: rgba(255,255,255,.6);
}
.progress{
  position: relative;
  width: 100%;
  height: 600px;
}
</style>
